<script>
// 三方数据预览
import SheetLoader from '@/utils/sheet-loader';
import * as thirdQuery from '../../../utils/third-query.js';

export default {
  name: 'TripartiteViewer',
  props: {
    dataId: {
      type: String, //数据ID
      default: '',
    },
  },
  data() {
    return {
      //数据加载器
      sheetLoader: null,
      //记录总数
      totalCount: 0,
      //分页大小
      pageSize: 10,
      //表格列
      columns: [],
      //分页数据
      tableData: [],
      //数据标题
      title: '',
    };
  },
  watch: {
    dataId: {
      async handler(newVal) {
        if (newVal !== '') {
          this.sheetLoader = new SheetLoader(this.dataId);
          const response = await this.sheetLoader.getPagedData(1, this.pageSize);
          this.totalCount = this.sheetLoader.data.length;
          this.title = `预览 "${this.sheetLoader.dataInfo.name}" 数据表`;
          this.columns = Object.keys(response[0] || {}).map(p => {
            if (Object.keys(response[0]).length > 9) {
              return {
                title: p,
                key: p,
                width: 180,
                maxWidth: 250,
                ellipsis: true,
              };
            } else {
              return {
                title: p,
                key: p,
                ellipsis: true,
              };
            }
          });
          this.tableData = response;
          this.$emit('dataLoaded', {
            title: this.title,
            data: this.sheetLoader.data,
          });
        }
      },
      immediate: true,
    },
  },
  //初始化表格
  mounted() {},
  methods: {
    //获取分页数据
    async getPagedData(pageIndex) {
      this.tableData = await this.sheetLoader.getPagedData(pageIndex, this.pageSize);
    },
  },
};
</script>

<template>
  <div class="datav-tripartite-viewer">
    <Table
      ref="viewTable"
      :height="500"
      :columns="columns"
      :data="tableData"
      border
      stripe
    >
    </Table>
    <Page
      v-if="totalCount > pageSize"
      :total="totalCount"
      :page-size="pageSize"
      @on-change="getPagedData"
    >
    </Page>
  </div>
</template>

<style lang="less" scoped>
.datav-tripartite-viewer {
  .k-page {
    margin-top: 10px;
    text-align: right;
  }
}
</style>
